<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>供应商旗舰店商品库</title>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../css/supplierShop.css">
	<script type="text/javascript" src="../js/rem2.js"></script>
</head>
<body>
	<div class="wrap">
		<!-- 头部 -->
		<div class="header">
			<label class="header_left"><img src="../img/w_nav_back.png"></label>
			<div class="header_title">供应商旗舰店</div>
			<label class="header_right"><img src="../img/icon_search.png"></label>
		</div>
		<!-- 头部 -->
		<!-- 内容 -->
		<div class="content">
		<!-- 	<div class="shopheader">
				<div class="shopPic">
					<img src="../img/90x90.jpg">
				</div>
				<h2 class="shopname">供应商旗舰店</h2>
				<div class="shopNum">
					<span class="shopfans">粉丝:1025</span>
					<span class="shopsell">推销商:2654</span>
				</div>
				<div class="focu_btn">关注</div>
			</div>
			<div class="shopzone">
				<div class="shoplist"><p>商品库</p><span class="underline"></span></div>
				<div class="shopdata"><p>资料</p></div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src="../img/135x135.jpg">
				</div>
				<div class="item_right">
					<h4 class="name">韩国泡面农心辛拉sssss面120g*5包</h4>
					<p class="num"><span>库存:999+件</span><span>66452人正在分销</span></p>
					<p class="price">建议售价:￥99.00</p>
					<h5 class="profits">平均利润:<span>￥54.00</span>/件</h5>
					<span class="add_btn">✔</span>
				</div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src="../img/135x135.jpg">
				</div>
				<div class="item_right">
					<h4 class="name">韩国泡面农心辛拉sssss面120g*5包</h4>
					<p class="num"><span>库存:999+件</span><span>66452人正在分销</span></p>
					<p class="price">建议售价:￥99.00</p>
					<h5 class="profits">平均利润:<span>￥54.00</span>/件</h5>
					<span class="add_btn">✔</span>
				</div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src="../img/135x135.jpg">
				</div>
				<div class="item_right">
					<h4 class="name">韩国泡面农心辛拉sssss面120g*5包</h4>
					<p class="num"><span>库存:999+件</span><span>66452人正在分销</span></p>
					<p class="price">建议售价:￥99.00</p>
					<h5 class="profits">平均利润:<span>￥54.00</span>/件</h5>
					<span class="add_btn">✔</span>
				</div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src="../img/135x135.jpg">
				</div>
				<div class="item_right">
					<h4 class="name">韩国泡面农心辛拉sssss面120g*5包</h4>
					<p class="num"><span>库存:999+件</span><span>66452人正在分销</span></p>
					<p class="price">建议售价:￥99.00</p>
					<h5 class="profits">平均利润:<span>￥54.00</span>/件</h5>
					<span class="add_btn">✔</span>
				</div>
			</div> -->
		</div>
		<!-- 内容 -->
	</div>
</body>
<script type="text/javascript">
	var xhr = new XMLHttpRequest()
	xhr.addEventListener("readystatechange",function(e){
		if(xhr.status==200&xhr.readyState==4){
			var Obj = JSON.parse(e.target.response).supplier
			readData(Obj)
			run()
		}
	})
	xhr.open("GET","https://www.easy-mock.com/mock/5bacade73679ca0f56b03f93/suppliershop");
	xhr.send();

	function readData(res){
		var wrap = document.querySelector(".wrap")
		var obj = res
		var template = function(shopPic,shopName,fans,shopsell,shopImg,name,num1,num2,price,profits){
			return`
			<div class="shopheader">
				<div class="shopPic">
					<img src=${shopPic}>
				</div>
				<h2 class="shopname">${shopName}</h2>
				<div class="shopNum">
					<span class="shopfans">粉丝:${fans}</span>
					<span class="shopsell">推销商:${shopsell}</span>
				</div>
				<div class="focu_btn">关注</div>
			</div>
			<div class="shopzone">
				<div class="shoplist"><p>商品库</p><span class="underline"></span></div>
				<div class="shopdata"><p>资料</p></div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src=${shopImg}>
				</div>
				<div class="item_right">
					<h4 class="name">${name}</h4>
					<p class="num"><span>库存:${num1}件</span><span>${num2}人正在分销</span></p>
					<p class="price">建议售价:￥${price}</p>
					<h5 class="profits">平均利润:<span>￥${profits}</span>/件</h5>
					<span class="add_btn">X</span>
				</div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src=${shopImg}>
				</div>
				<div class="item_right">
					<h4 class="name">${name}</h4>
					<p class="num"><span>库存:${num1}件</span><span>${num2}人正在分销</span></p>
					<p class="price">建议售价:￥${price}</p>
					<h5 class="profits">平均利润:<span>￥${profits}</span>/件</h5>
					<span class="add_btn">X</span>
				</div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src=${shopImg}>
				</div>
				<div class="item_right">
					<h4 class="name">${name}</h4>
					<p class="num"><span>库存:${num1}件</span><span>${num2}人正在分销</span></p>
					<p class="price">建议售价:￥${price}</p>
					<h5 class="profits">平均利润:<span>￥${profits}</span>/件</h5>
					<span class="add_btn">X</span>
				</div>
			</div>
			<div class="item">
				<div class="item_left">
					<img src=${shopImg}>
				</div>
				<div class="item_right">
					<h4 class="name">${name}</h4>
					<p class="num"><span>库存:${num1}件</span><span>${num2}人正在分销</span></p>
					<p class="price">建议售价:￥${price}</p>
					<h5 class="profits">平均利润:<span>￥${profits}</span>/件</h5>
					<span class="add_btn">X</span>
				</div>
			</div>
			`
		}
		obj.forEach(function(el,index){
			var content = document.createElement("div")
			content.classList.add("content")
			content.innerHTML=template(el.shopPic,el.shopName,el.fans,el.shopsell,el.shopImg,el.name,el.num1,el.num2,el.price,el.profits)
			wrap.appendChild(content)
		})
	}
</script>
<script type="text/javascript">
	var back=document.querySelector(".header_left");
	back.addEventListener("click",function(){
		history.back();
	})
	function run(){
		var focu_btn = document.querySelector(".focu_btn");
		var shopdata = document.querySelector(".shopdata");
		var add_btns = document.querySelectorAll(".add_btn");
		var item = document.querySelectorAll(".item");
		shopdata.addEventListener("click",function(){
			location.href="supplierShopdata.html"
		})
		focu_btn.addEventListener("click",function(){
			focu_btn.innerText="已关注"
		})
		for(var i = 0;i<add_btns.length;i++){
			(function(a){
				add_btns[a].addEventListener("click",function(){
					if(add_btns[a].innerText=="X"){
						add_btns[a].innerText="✔"
					}else{
						add_btns[a].innerText="X"
					}
					add_btns[a].classList.toggle("add_btn1")
					// console.log([add_btns[a]])
				})
			})(i)
		}
		for(var j = 0;j<item.length;j++){
			(function(b){
				item[b].addEventListener("click",function(){
					location.href="goods_details.html"
				})
			})(j)
		}
	}
</script>
</html>